<template>
  <div class="card-face card-face-2" :class="[swipeAnimation, enterAnimation]">
    <div class="animation-container">
      <div class="animation-placeholder" :style="{ backgroundImage: `url(${word.animationUrl})` }">
        <span v-if="!word.animationUrl">动画场景</span>
      </div>
    </div>
    <div class="example-container">
      <p class="example">{{ word.example }}</p>
      <p class="example-translation">{{ word.exampleTranslation }}</p>
      <button class="play-button" @click.stop="playExampleAudio">
        <i class="bi bi-volume-up"></i> 播放例句
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFaceExample',
  props: {
    word: {
      type: Object,
      required: true
    },
    swipeAnimation: {
      type: String,
      default: ''
    },
    enterAnimation: {
      type: String,
      default: ''
    }
  },
  methods: {
    playExampleAudio(event) {
      if (event) event.stopPropagation();
      this.$emit('play-example-audio');
    }
  }
}
</script>